<template>
  <div class="dy-main AccountTranDetail" >
    <div class="dy-header">
      <x-header @on-click-more="showMenus = true" :left-options="{backText: '',preventGoBack:true}" @on-click-back="back">
        <div slot="overwrite-title" class="title-info"><h3>交易明细</h3><p class="card-info">东亚银行<span>1234 **** 9912</span></p></div>
        <a slot="right">切换账户</a>
      </x-header>
    </div>
    <div class="dy-body">
      <div v-show="selectDate==='1'" class="mask"></div>
      <group gutter="0" class="screen-container">
        <div  class="screen">
          <div class="tabs">
            <tab bar-active-color="transparent" active-color="#F28300">
              <tab-item selected @on-item-click="onItemClick(1)">全部</tab-item>
              <tab-item @on-item-click="onItemClick(2)">支出</tab-item>
              <tab-item @on-item-click="onItemClick(3)">收入</tab-item>
            </tab>
          </div>
          <div class="vacancy"></div>
          <div class="select-data" @click="selectDate=='1'?selectDate='0':selectDate='1'">
            <cell :title="screenShow" is-link :arrow-direction="selectDate=='0'?'down':'up'" ></cell>
          </div>
        </div>
        <transition name="fade">
         <div v-show="selectDate==='1'" class="date-screen">
          <div class="date-screen-option">
            <div class="option-tabs">
              <p v-for="(tab, tabIndex) in duringTab" :key="tabIndex" class="option-tab" :class="tab.selected?'selected':''" @click="duration(tab, tabIndex)" >{{tab.during}}</p>
            </div>
            <h4>自定义</h4>
            <div class="date-selector">
              <p>
                <!--<cell title="起始日期" is-link :arrow-direction="selectDateStart=='0'?'down':'up'"  class="date-start"></cell>-->
                <datetime v-model="beginDate" format="YYYY-MM-DD" placeholder="起始日期" @on-change="tabChange" year-row="{value}年" month-row="{value}月" day-row="{value}日" confirm-text="完成" cancel-text="取消" class="date-start"></datetime>
              </p>
              <p class="split-line"></p>
              <p>
                <!--<cell title="终止日期" is-link :arrow-direction="selectDateEnd=='0'?'down':'up'"  class="date-end"></cell>-->
                <datetime v-model="endDate" format="YYYY-MM-DD" placeholder="终止日期" @on-change="initTabColor" year-row="{value}年" month-row="{value}月" day-row="{value}日" confirm-text="完成" cancel-text="取消" class="date-end"></datetime>
              </p>
            </div>
          </div>
          <div class="date-screen-buttons">
            <p class="date-screen-cancel" @click="dateScreenCancel">取消</p>
            <p class="date-screen-confirm" @click="dateScreenConfirm">确定</p>
          </div>
        </div>
        </transition>
      </group>
      <!--<p>{{aaa}}</p>-->
      <div class="scroll-container">
        <scroller lock-x scrollbar-y use-pullup :pullup-config="{ content: '上拉加载更多', downContent: '松开进行加载', upContent: '上拉加载更多', loadingContent: '加载中...' }" height="100%" ref="demo3" @on-pullup-loading="getMore" >
          <div class="scroll-box">
            <group v-for="(dataList, listsIndex) in dataLists" :key="listsIndex"  :title="dateFil(dataList.dateShow)" title-color="#333333" class="tran-detail-item">
              <ul>
                <li v-for="(data, dataIndex) in dataList.datasArr" :key="dataIndex">
                  <div class="detail-content">
                    <div class="expense-title">
                      <h4 class="expense-payee">{{data.payeeName}}</h4>
                      <p class="expense-info">
                        <span class="expense-item">{{data.tranDesc}}</span>
                        <span class="expense-date">{{data.tranDate}}</span>
                      </p>
                    </div>
                    <p class="expense-amount"><span>{{data.creditDebit=='C'?'-':'+'}}</span>{{data.tranAmt}}</p>
                  </div>
                </li>
              </ul>
            </group>
          </div>
        </scroller>
      </div>
    </div>
    <!--时间选择弹框-->
    <!--<zx-timeRang v-model="timeShow" :timeDate="timeDate" @on-click="setDateVal"></zx-timeRang>-->
    <!--<actionsheet v-model="dateSwitch" show-cancel :menus="menus" @on-click-menu="dateClick"></actionsheet>-->
  </div>
</template>
<script>
export default {
  data () {
    return {
      selectDate: '0', // 选择日期下拉 0为折叠 1为展开
      cardNo: '1234 **** 7890', // 选择日期下拉 0为折叠 1为展开
      beginDate: '', // 起始日期
      endDate: '', // 终止日期
      pageNo: 1, // 页数
      pageSize: 2, // 每页记录数
      duringTab: [ // 日期选择tab按钮
        {during: '最近一周', selected: false},
        {during: '最近一个月', selected: false},
        {during: '最近三个月', selected: false},
        {during: '最近六个月', selected: false}
      ],
      dataLists: [ // 最终用于渲染数组
        {
          dateShow: '1月29日', // group 上的日期
          datasArr: [{
            tranDate: '2018-09-09', // 交易日期
            creditDebit: 'C', // 支付标记 C贷 D借
            tranType: '1', // 交易类型
            tranAmt: '3000', // 交易金额
            currency: '人民币', // 币种
            payeeName: '熊大', // 收款人
            tranDesc: '日常饮食' // 交易描述
          }]
        }
      ],
      screenShow: '', // 下拉菜单标题显示
      bbb: '',
      aaa: ''
    }
  },
  methods: {
    /**
     * 返回
     **/
    back () {
      this.$publicFun.goBack(this)
    },
    /**
     * 返回
     * @param {number} val 点击对象（全部、收入、支出）
     **/
    onItemClick (val) {
      if (val === 1) {
        console.log('aaa')
      }
      if (val === 2) {
        console.log('bbb')
      }
    },
    /**
     * 选择日期周期
     * @param {object} val 传入的tab对象（包含最近一周、最近一个月、最近三个月、最近六个月及是否选中的状态）
     * @param {number} index 对象的下标
     */
    duration (val, index) {
      let _this = this
      this.endDate = this.$publicFun.timeFormat('yyyy-MM-dd', new Date())
      if (index === 0) {
        this.beginDate = this.$publicFun.timeHandle(this.endDate, -7)
      }
      if (index === 1) {
        this.beginDate = this.$publicFun.setFastTime(this.endDate, 1)
      }
      if (index === 2) {
        this.beginDate = this.$publicFun.setFastTime(this.endDate, 3)
      }
      if (index === 3) {
        this.beginDate = this.$publicFun.setFastTime(this.endDate, 6)
      }
      // 按钮变色
      setTimeout(function () {
        val.selected = true
        _this.screenShow = val.during
      }, 1)
    },
    dateScreenCancel () {
      // 按钮变色
      this.selectDate = '0'
    },
    dateScreenConfirm () {
      // 按钮变色
      this.selectDate = '0'
      this.getData()
    },
    tabChange: function () {
      this.initTabColor()
      if (!(this.beginDate === this.$publicFun.timeHandle(this.endDate, -7) || this.beginDate === this.$publicFun.setFastTime(this.endDate, 1) || this.beginDate === this.$publicFun.setFastTime(this.endDate, 3) || this.beginDate === this.$publicFun.setFastTime(this.endDate, 6)) || this.endDate !== this.$publicFun.timeFormat('yyyy-MM-dd', new Date())) {
        this.screenShow = '自定义'
      }
    },
    initTabColor () { // 按钮变色
      this.duringTab.map(function (item, index, arr) {
        item.selected = false
      })
    },
    /**
     * 获取列表数据
     */
    getData () {
      let _this = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'CI004003_2', 'base_Data': { 'cardNo': _this.cardNo, 'beginDate': _this.beginDate, 'endDate': _this.endDate, 'pageNo': _this.pageNo, 'pageSize': _this.pageSize }}
        }),
        function (response) {
          response = JSON.parse(response)
          // _this.bbb = response.data.data[0].arrays.length
          // _this.bbb = response.data[0].arrays
          // 获得倒序并且去重的日期数组
          if (response.status === 0 || response.status === '0') {
            let responseData = response.data.data[0].arrays
            let dateArr = [] // 去重的日期数组
            for (var n = 0, nLength = responseData.length; n < nLength; n++) {
              responseData[n].tranDate = parseInt(responseData[n].tranDate)
              if (dateArr.indexOf(responseData[n].tranDate) === -1) {
                dateArr.push(responseData[n].tranDate)
                dateArr.sort(function (a, b) {
                  return (b - a)
                })
              }
            }
            // _this.bbb = dateArr
            let dataLists = [] // 本次交互获得经整理的 用于渲染渲染数据
            for (var i = 0, length = dateArr.length; i < length; i++) {
              let datasArr = [] //  最终数据中 数据数组
              for (var j = 0, jLength = responseData.length; j < jLength; j++) {
                if (dateArr[i] === responseData[j].tranDate) {
                  datasArr.push(responseData[j])
                }
              }
              // _this.bbb = datasArr
              dataLists.push({dateShow: dateArr[i], datasArr: datasArr})
            }
            // _this.bbb = dataLists
            // todo
            let oldDataLists = _this.dataLists// 上次用于渲染的数据
            // _this.bbb = oldDataLists
            if (oldDataLists.length === 0) {
              // _this.bbb = 'aaaaaaa'
              _this.dataLists = oldDataLists.concat(dataLists)
              // _this.bbb = dataLists
            } else {
              if (dataLists[0].dateShow === oldDataLists[oldDataLists.length].dateShow) {
                oldDataLists[oldDataLists.length].datasArr = oldDataLists[oldDataLists.length].datasArr.concat(dataLists[0].datasArr)
                dataLists.shift()
                _this.dataLists = oldDataLists.concat(dataLists)
              } else {
                _this.dataLists = oldDataLists.concat(dataLists)
              }
            }
            // .bbb = _this.dataLists
            _this.pageNo++
          } else {
            console.log('fail')
          }
        })
    },
    getMore () {
      this.getData()
    },
    /**
     * 过滤转化年月日
     * @param {number} val 传入格式为数字
     */
    dateFil (val) {
      let valNew = val + ''
      // let year = valNew.substr(0, 4)
      let month = valNew.substr(4, 2)
      let day = valNew.substr(6, 2)
      // return year + '年' + month + '月' + day + '日'
      return month + '月' + day + '日'
    }
  },
  mounted () {
    let _this = this
    this.dataLists = []
    setTimeout(function () {
      _this.duration(_this.duringTab[0], 0)
      _this.getData(_this.pageNo, _this.pageSize)
    }, 50)
  }
}
</script>
<style lang="less">
  .AccountTranDetail {
    .dy-header {
      .title-info {
        text-align: center;
        h3 {
          height: .48rem;
          /*padding-top: .04rem;*/
          font-size: .36rem;
        }
        p {
          height: .34rem;
          font-size: .24rem;
          color: #9b9b9b;
          span {
            margin-left: .12rem;
          }
        }
      }
    }
    .dy-body {
      .mask {
        width: 100%;
        position: absolute;
        top: 1.8rem;
        bottom: 0;
        left: 0;
        background-color: #000;
        opacity: 0.35;
        z-index: 1;
      }
      .screen-container {
        position: absolute;
        top: .88rem;
        left: 0;
        width: 100%;
        z-index:2;
        .screen {
          width: 100%;
          height: 1rem;
          padding-right:.28rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: .01rem solid #DBDBDB;
          .tabs {
            width: 3.36rem;
            .vux-tab .vux-tab-item {
              background: none;
              color: #9B9B9B;
            }
          }
          .vacancy {
            flex-grow: 1;
          }
          .select-data {
            position: relative;
            width: 1.9rem;
            height: .8rem;
            line-height:.8rem;
            &:before {
              content:'';
              display: block;
              width:.02rem;
              height:.44rem;
              background-color: #DBDBDB;
              position: absolute;
              top: .18rem;
            }
            .weui-cell {
              padding: 0;
            }
            .vux-label {
              padding-left:.2rem;
              font-size: .28rem;
              color: #9B9B9B;
            }
          }
        }
        .date-screen {
          /*height: 2rem;*/
          max-height: 6rem;
          overflow: hidden;
          &.fade-enter-active, &.fade-leave-active {
            transition: max-height 0.2s ease
          }
          &.fade-enter, &.fade-leave-active {
            max-height: 0
          }
          .date-screen-option {
            width: 100%;
            padding: .4rem .28rem;
            .option-tabs {
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              .option-tab {
                padding: .16rem .18rem;
                margin-bottom: .4rem;
                font-size: .24rem;
                color: #333333;
                background-color: #f7f7f7;
                margin-right: .24rem;
                border: .01rem solid #E7E7E7;
                -webkit-border-radius: .08rem;
                -moz-border-radius: .08rem;
                border-radius: .08rem;
                &.selected {
                  background-color: #F28300;
                  color: #fff;
                }
                &:last-child {
                  margin-right: 0;
                }
              }
            }
            h4 {
              margin-bottom: .2rem;
              font-size: .28rem;
              color: #333333;
            }
            .date-selector {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .vux-label { // 下拉框标题
                font-size: .24rem;
                color: #9b9b9b;
              }
              .date-start,
              .date-end {
                width: 3.16rem;
                height: .64rem;
                padding: 0 .2rem;
                line-height: .64rem;
                border: .02rem solid #DBDBDB;
                -webkit-border-radius: .08rem;
                -moz-border-radius: .08rem;
                border-radius: .08rem;
                .weui-cell__ft{
                  font-size: .24rem;
                  color: #9b9b9b;
                  text-align: left;
                }
              }
              .split-line {
                height: .02rem;
                width: .28rem;
                background-color: #9b9b9b;
              }
            }
          }
          .date-screen-buttons {
            width: 100%;
            height: .88rem;
            display: flex;
            align-items: center;
            border-top: .01rem solid #DBDBDB;
            z-index:11;
            p {
              height: 100%;
              width: 50%;
              text-align: center;
              font-size: .32rem;
              color: #9B9B9B;
              line-height: .88rem;
            }
            .date-screen-confirm {
              color: #F28300;
              border-left: .01rem solid #DBDBDB;
            }
          }
        }
      }
      .scroll-container {
        width:100%;
        height: 100%;
        padding-top: 1rem;
        .scroll-box {
          width:100%;
          height: 100%;
          .tran-detail-item {
            li {
              border-top: .01rem solid #DBDBDB;
              &:first-child{
                border: none;
              }
              .detail-content {
                width: 100%;
                height: 1.34rem;
                padding: .3rem .28rem .26rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .expense-title {
                  h4 {
                    font-size: .28rem;
                    color: #333333;
                  }
                  .expense-info {
                    font-size: .24rem;
                    color: #9b9b9b;
                    span {
                      padding-right: .14rem;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
